<template>
    <div>
<cartBlock :carList='value' v-for="value in combined" :key='value.id' @delId='del'></cartBlock>

<!-- settle accounts -->
<div class="totalPrice">
   <div class="left">
        <p>总计(不含运费)：</p>
    <p>已选商品{{getTotalCount}}件，总价￥{{getTotalPrice}}元</p>
   </div>
   <div class="right">
        <van-button type="danger" >去结算</van-button>
   </div>

</div>
    </div>
</template>

<script>
import cartBlock from '@/components/cartBlock.vue'
import {getCartList} from '../apis/goods'
export default {
   components:{
       cartBlock
   },
   data () {
       return {
           idList: [],
           cartList:[],
           combined:[],
            data:JSON.parse(localStorage.getItem('data'))
       }
   },
//获取购物车列表
  async mounted () {
     if(this.data==null){
         this.$toast.success('购物车空空如也')
         return
     }
   this.idList =this.data.map(v=>{
        return  v.id   
   })
   console.log(this.idList);
       let res =await getCartList({ids:this.idList})
       console.log(res);
       this.cartList=res.data.message
       console.log(this.cartList);
       this.cartList=this.cartList.map(v=>{
           return{
               ...v,
               value:1,
               
           }
       })

this.combined = this.cartList.reduce((acc, cur) => {
	const target = acc.find(e => e.id === cur.id);
    console.log(target)
	if (target) {
		Object.assign(target, cur);
	} else {
		acc.push(cur);
	}
	return acc;
}, this.data);
  },
  computed: {
      getTotalPrice(){
          let total=0
          this.combined.forEach((v) => {
            if(v.checked){
               total+=v.sell_price*v.num
            }
          })
          return total
      },
      getTotalCount(){
          let num=0
          this.combined.forEach((v) => {
            if(v.checked){
              num+=v.num
            }
          })
          return num
      }
  },
   methods: {
      del(id){
          this.combined=this.combined.filter(v=>{
              return v.id!==id
          })
           this.idList=this.idList.filter(v=>{
              return v !==id
          })
          console.log(this.idList);
          this.data
      }
  }

  };
</script>

<style lang='less' scoped>
.totalPrice{
    height: 100px;
    background-color: #eeeeee;
    display: flex;
     align-items: center;
    justify-content: space-between;
     font-weight: 700;
    .left{
        padding-left:20px;
      p:nth-child(1){
          font-size: 18px;
          margin-bottom: 10px;
           
          }
    }
    .right{
        padding-right:20px;
    }

}
</style>
